<table st-table="vm.list" st-safe-src="vm.rawList" class="table table-striped">
    <thead>
        <tr>
            <th colspan="3" class="search-container">
                <div class="widget-header">
                    <span class="title">JVM heapHisto({{vm.rawList.length}}) </span>
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-search"></i>
                        </div>
                        <input st-search placeholder="关键字" class="input-sm form-control" type="search"
                        />
                    </div>
                </div>
            </th>

        </tr>
        <tr class="summary-bar">
            <th colspan="3">
                <div class="info-cell">
			total objects count: {{vm.totalCount}} /
                    total bytes: {{vm.totalSize}}
                </div>
            </th>
        </tr>
        <tr class="widget-header">
            <th class="sorting" st-sort="class" width="50%">class</th>
            <th class="sorting" st-sort="count" width="25%">count</th>
            <th class="sorting" st-sort="bytes" width="25%">bytes</th>
        </tr>
        <tr>
            <th>
                <input placeholder="search className" st-search="class" />
            </th>
            <th>
                <st-number-range predicate="count" lower="query.lower" higher="query.higher"></st-number-range>
            </th>
            <th>
                <st-number-range predicate="bytes" lower="query.lower" higher="query.higher"></st-number-range>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in vm.list">
            <td>{{item.class}}</td>
            <td>{{item.count | number}}</td>
            <td>{{item.bytes | size}}</td>
        </tr>

    </tbody>
    <tfoot>
        <tr>
            <td colspan="5" class="text-center">
                <div st-items-by-page="15" st-pagination=""></div>
            </td>
        </tr>
    </tfoot>
</table>
